<template>
  <div class="row-container">
    <div id="my-chart" style="width: 100%; height: 600px;"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts/core'
  // 引入柱状图图表，图表后缀都为 Chart
  import { LineChart } from 'echarts/charts'
  // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
  import { CanvasRenderer } from 'echarts/renderers'
  // 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
  import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent
  } from 'echarts/components'
  echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LineChart,
    CanvasRenderer,
    LegendComponent
  ])
  export default {
    props: {
      chartOptions: {
        type: Object,
        default: () => {}
      }
    },
    watch: {
      chartOptions: {
        deep: true,
        handler() {
          console.log(this.chartOptions)
          this.initChart(this.chartOptions)
        }
      }
    },
    data() {
      return {
        chart: null,
        baseOption: {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            bottom: '3%'
          },
          grid: {
            left: '3%',
            right: '4%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false
          },
          yAxis: {
            type: 'value'
          },
          series: []
        }
      }
    },
    mounted() {
      console.log(this.chartOptions)
      this.initChart()
    },
    destroyed() {
      this.chart = null
    },
    methods: {
      initChart(options = {}) {
        if (this.chart) {
          this.chart = null
        }
        this.chart = echarts.init(document.getElementById('my-chart'))
        const that = this
        this.chart.setOption({ ...that.baseOption, ...options })
      }
    }
  }
</script>
